<template>
    <div class="image-preview">
        <a-badge :count="state.count">
            <a-image-preview-group>
                <template v-for="(item, index) in state.img" :key="index">
                    <a-image :width="width" :height="height" :src="item" />
                </template>
            </a-image-preview-group>
        </a-badge>
    </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, defineProps, withDefaults } from 'vue'

/**
 * 类型检查
 */
interface IProps {

    /**
     * 是否显示右上角计数图标
     */
    showIcon?: boolean;

    /**
     * 宽度
     */
    width?: number;

    /**
     * 高度
     */
    height?: number;

    /**
     * 地址
     */
    src: string
}



const props = withDefaults(defineProps<IProps>(), {
    showIcon: true,
    width: 50,
    height: 50,
    src: ""
})

const state = reactive({
    count: 0,
    img: props.src.split(",")
})

if (props.showIcon) {
    if (props.src != "" || props.src.length > 0) {
        state.count = state.img.length;
    }
}

</script>

<style>
.image-preview {
    padding: 6px;
}
.image-preview img {
    height: 100%;
}
.image-preview .ant-image:nth-child(n + 2) {
    display: none;
}
</style>